<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
    <title>sxqm</title>
    <meta name="format-detection" content="telephone=no">
    <script src="/jquery.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<div>
    <button onclick="clean();">清 空</button>
    <button onclick="save();">生成图片</button>
</div>
</body>

<script>

    var canvas, board;
    canvas = document.getElementById('myCanvas');
    canvas.height = 500;
    canvas.width = 500;

    board = canvas.getContext('2d');
    board.lineWidth = 4; //设置画笔粗细
    board.strokeStyle = "#000";
    board.lineJoin = "round"; //设置画笔轨迹基于圆点拼接

    var mousePress = false;
    var last = null;

    function beginDraw(event) {
        mousePress = true;
    }
    function endDraw(event) {
        mousePress = false;
        event.preventDefault();
        last = null;
    }
    function drawing(event) {
        event.preventDefault();
        if (!mousePress) return;
        var xy = GetPos(event);
        if (last != null) {
            board.beginPath();
            board.moveTo(last.x, last.y);
            board.lineTo(xy.x, xy.y);
            board.stroke();
        }
        last = xy;
    }

    function GetPos(event) {
        var isTouch = event.type.indexOf('touch') >= 0 ? true : false;
        var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft;
        var y = isTouch ? event.touches[0].pageY : event.offsetY + event.target.offsetTop;
        return { x: x, y: y };
    }

    function save() {
        var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
        var img = new Image();
        img.src = data;
        $(document.body).append(img);


        $.ajax({
            type: "POST",
            url: "/test/pdfToFrontEnd",
            data: { file: data},    //视情况将base64的前面字符串data:image/png;base64,删除
            xhrFields: { responseType: "arraybuffer" },
            success: function(result) {
                alert("上传成功");

                let blob = new Blob([result], {type: 'application/force-download'});
                if('msSaveOrOpenBlob' in navigator){
                    window.navigator.msSaveOrOpenBlob(blob, '文件.pdf');
                    return;
                }
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = '文件.pdf';
                link.click();



            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败，请检查网络后重试");
            }
        });
    }

    function clean() {
        board.clearRect(0, 0, canvas.width, canvas.height);
    }

    canvas.onmousedown = beginDraw;
    canvas.onmousemove = drawing;
    canvas.onmouseup = endDraw;
    canvas.addEventListener('touchstart', beginDraw, false);
    canvas.addEventListener('touchmove', drawing, false);
    canvas.addEventListener('touchend', endDraw, false);
</script>
</html>
